<template>
	<view class="content">
		<u-back-top :scroll-top="scrollTop" z-index="9999999"></u-back-top>
		<u-picker v-model="areashow" mode="region" @confirm="citySelection"></u-picker>
		<!-- 筛选 -->
		<u-popup v-model="show" mode="right" width="599" zoom safe-area-inset-bottom z-index="9999999">
			<scroll-view scroll-y="true" class="filterPopupLayer" scroll-with-animation show-scrollbar>
				<view>
					<view class="vehScreening">车辆筛选</view>
					<view class="list">
						<view class="thePrcRng">
							<text class="text">价格区间</text>
							<view class="">
								<input type="number" placeholder="0" value="" v-model="list.number" />
								<text>～</text>
								<input type="number" placeholder="1000" value="" v-model="list.number1" />
								<text>元</text>
							</view>
						</view>
						<!-- 品牌 -->
						<view class="brand">
							<text class="text">品牌</text>
							<view class="nm">
								<text
									v-for="(item, index) in filterData[0].secondary"
									:key="index"
									@click="styleRed(index)"
									:class="{ active: index === redStyle }"
								>
									{{ item.name }}
								</text>
							</view>
						</view>
						<!-- 车型 -->
						<view class="model">
							<text class="text">车型</text>
							<view class="nm">
								<text
									v-for="(item1, index1) in filterData[1].secondary"
									@click="styleRed1(index1)"
									:class="{ active: index1 === redStyle1 }"
									:key="index1"
								>
									{{ item1.name }}
								</text>
							</view>
						</view>
						<!-- 几座 -->
						<view class="aFew">
							<text class="text">几座</text>
							<view class="nm">
								<text
									v-for="(item2, index2) in filterData[2].secondary"
									@click="styleRed2(index2)"
									:class="{ active: index2 === redStyle2 }"
									:key="index2"
								>
									{{ item2.name }}
								</text>
							</view>
						</view>
						<!-- 底部 -->
						<view class="bottom">
							<view
								class="cancel"
								:style="{
									backgroundColor: redStyle3 === 0 ? '#B50000' : '',
								}"
								@click="cancel"
							>
								取消
							</view>
							<view
								class="confirm"
								@click="confirm"
								:style="{
									backgroundColor: redStyle3 === 1 ? '#B50000' : '',
								}"
							>
								确认
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</u-popup>

		<u-picker v-model="pikerOne" mode="time" :params="params" z-index="99999991" @confirm="confirmOne"></u-picker>
		<u-picker v-model="pikerTwo" mode="time" :params="params" z-index="99999991" @confirm="confirmTwo"></u-picker>

		<u-popup v-model="show1" mode="left" width="599" zoom safe-area-inset-bottom z-index="9999999">
			<view class="tmScreening">
				<view class="vehScreening">时间筛选</view>
				<view class="box">
					<view class="top" @click="carTmm">
						<view class="tm">
							<text>用车</text>
							<text>时间</text>
						</view>
						<view class="dt">
							<text class="text">{{ car.month }}月{{ car.day }}日</text>
							<text class="text1">{{ car.week }} {{ car.hour }}:{{ car.minute }}</text>
						</view>
					</view>

					<text class="days">-&emsp; {{ days || 1 }}天 &emsp;-</text>

					<view class="button" @click="retTmm">
						<view class="tm">
							<text>还车</text>
							<text>时间</text>
						</view>
						<view class="dt">
							<text class="text">{{ retCar.month }}月{{ retCar.day }}日</text>
							<text class="text1">{{ retCar.week }}{{ retCar.hour }}:{{ retCar.minute }}</text>
						</view>
					</view>
				</view>
				<view class="btn">
					<view class="cancel" @click="cancelTest">取消</view>
					<view class="confirm" style="background-color: #D60000;" @click="confirmScreening">确认</view>
				</view>
			</view>
		</u-popup>

		<u-search
			placeholder="请输入您所需要的产品名称"
			v-model="name"
			shape="round"
			:clearabled="true"
			bg-color="#1B1B1B"
			:show-action="false"
			color="#DCDCDC"
			placeholder-color="#DCDCDC"
			animation
			border-color="#DCDCDC"
			@search="getGarage"
			@clear="clearContent"
			@change="changeContent"
		></u-search>

		<view class="srt" style="display: none;">
			<!-- <view class="info" @click="areashow = true , this.name=''"> -->
			<view class="info" @click="areashow = true">
				<text>{{ locationAddr }}</text>
				<image src="../../static/home/saixuan3.png" mode=""></image>
			</view>
			<view class="info3" @click="tm">
				<text>时间</text>
				<image src="../../static/home/saixuan.png" mode=""></image>
			</view>
			<view class="info1" @click="srt">
				<text>{{ srt1 }}</text>
				<image src="../../static/home/saixuan1.png" mode=""></image>
			</view>

			<view class="info2" @click="(show = true), (this.name = '')">
				<text>筛选</text>
				<image src="../../static/home/saixuan2.png" mode=""></image>
			</view>
		</view>

		<view class="addCar margin-top"><text class="add cuIcon-add" @click="jumpToGarageEdit('')"></text></view>
		<view v-for="(item3, index3) in garageData" :key="index3">
			<view class="list" @click="jumpToGarageEdit(item3.id)">
				<view class="offShelf">
					
					<text :style="{ color: item3.shelves == '已上架' ? '' : '#ADADAD ' }">{{ item3.shelves }}</text>
					
				</view>
				<view class="image">
					<!-- aspectFill -->
					<image :src="item3.picture" mode="aspectFill"></image>
				</view>
				<view class="introduction">
					<view class="xiexian"><image src="../../static/home/xiexiand.png" mode=""></image></view>
					<view class="left">
						<text class="text">{{ item3.name }}</text>
						<!-- <text class="text1" v-if="item3.is_activity">
							活动倒计时 {{ item3.discount_time | capitalize }}
						</text> -->
						<text class="text1"></text>
						<view class="text2">
							<text>{{ item3.plate | hide }}</text>
							<text>{{ item3.rent_num }}</text>
						</view>
					</view>
					<view class="right">
						<view class="text">
							<text class="fuqilai">￥ {{ item3.rent }}/天</text>
							<view class="henxian"></view>
						</view>
						<view class="text1" v-if="item3.lineation !== '0.00'">￥ {{ item3.lineation }}/天</view>
						<view class="text1" v-else></view>
					</view>
				</view>
			</view>
		</view>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
export default {
	data() {
		return {
			status: 'loadmore',

			page: 1,
			limit: 10,
			car: {
				year: '',
				day: '',
				hour: '',
				minute: '',
				month: '',
				week: '',
			},
			isXuanche: '',
			timeOne: '',
			timeTwo: '',
			days: '',
			retCar: {
				year: '',
				day: '',
				hour: '',
				minute: '',
				month: '',
				week: '',
			},
			params: {
				year: true,
				month: true,
				day: true,
				hour: true,
				minute: true,
			},
			pikerOne: false,
			pikerTwo: false,

			searchEmpty: false,
			areashow: false,
			//timestamp: 86400,
			//
			srt1: '默认',
			index: 1,
			//keyword: '',
			show: false, // 筛选
			show1: false, // 时间
			redStyle: 0,
			redStyle1: 0,
			redStyle2: 0,
			redStyle3: 1,
			dddd: true,
			uid: 0,
			page: 1, // 第一页
			limit: 50, //每页10条
			name: '', //搜索名称 默认0
			sort: 0, //排序 1正 2反 默认0
			screen: [], //筛选 默认空数组
			garageData: [], // 车库列表
			filterData: [], // 筛选内容
			homepage: {},
			locationAddr: '', // 定位地址
			scrollTop: 0,
			list: {
				number: '',
				number1: '',
				nn1: '',
				nn2: '',
				nn3: '',
			},
		};
	},
	onShow() {
		this.page = 1;
		this.garageData = [];
		this.getGarage();
	},
	onLoad() {
		this.locationAddr = getApp().globalData.locationAddr;
		this.uid = getApp().globalData.uid;
		this.getGarage();
		this.garageScreening();
		this.timeFormate();
		this.timeFormate1();
	},
	methods: {
		cancelTest() {
			this.show1 = false;
		},
		async confirmScreening() {
			if (!this.timeTwo) return uni.$showMsg('请选择还车时间');
			if (this.isXuanche < 0) return uni.$showMsg('还车时间不能小于用车时间');

			var homepage = {};
			homepage['time_quantum'] = `${this.timeOne},${this.timeTwo}`;
			const res = await this.$u.post('api/user/user_admin_car', {
				uid: getApp().globalData.uid,
				page: this.page,
				limit: this.limit,
				name: this.name,
				sort: this.sort,
				screen: this.screen,
				homepage: homepage,
			});
			console.log('获取车库 >>  ', res);
			if (res.data.length === 0) {
				this.searchEmpty = true;
				this.show1 = false;
			} else {
				this.searchEmpty = false;
				this.show1 = false;
			}
			this.garageData = res.data;
		},
		carTmm() {
			this.pikerTwo = true;
		},
		retTmm() {
			this.pikerOne = true;
		},

		tm() {
			this.show1 = true;
			this.timeFormate();
			this.timeFormate1();
		},
		confirmOne(e) {
			this.retCar.day = e.day;
			this.retCar.year = e.year;
			this.retCar.hour = e.hour;
			this.retCar.minute = e.minute;
			this.retCar.month = e.month;
			this.timeOne = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
			var dateString = e.year + '-' + e.month + '-' + e.day;
			var dateObject = new Date(dateString);
			let weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

			this.retCar.week = weeks[dateObject.getDay()];
			this.count();
			// 算出天数
			//console.log('算出天数.timeOne :>> ', this.timeOne);
			console.log('算出天数.timeTwo :>> ', this.timeTwo);
		},
		confirmTwo(e) {
			this.retCar.day = e.day;
			this.retCar.year = e.year;
			this.retCar.hour = e.hour;
			this.retCar.minute = e.minute;
			this.retCar.month = e.month;
			this.timeTwo = `${e.year}-${e.month}-${e.day} ${e.hour}:${e.minute}`;
			var dateString = e.year + '-' + e.month + '-' + e.day;
			var dateObject = new Date(dateString);
			let weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];

			this.retCar.week = weeks[dateObject.getDay()];
			this.count();
			// 算出天数
			console.log('算出天数.timeOne :>> ', this.timeOne);
			console.log('算出天数.timeTwo :>> ', this.timeTwo);
		},
		// 获取现在时间
		timeFormate() {
			let myDate = new Date();
			// console.log(myDate)
			let wk = myDate.getDay();
			let yy = String(myDate.getFullYear());
			let mm = myDate.getMonth() + 1;
			let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate());
			let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours());
			let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes());
			let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds());
			let weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
			let week = weeks[wk];

			this.car.month = mm;
			this.car.year = yy;
			this.car.day = dd;
			this.car.hour = hou;
			this.car.minute = min;
			this.car.week = week;

			this.timeOne = `${yy}-${mm}-${dd} ${hou}:${min}`;
		},
		timeFormate1() {
			var curDate = new Date();
			let myDate = new Date(curDate.getTime() + 24 * 60 * 60 * 1000);
			console.log('myDate :>> ', myDate);
			let wk = myDate.getDay();
			let yy = String(myDate.getFullYear());
			let mm = myDate.getMonth() + 1;
			let dd = String(myDate.getDate() < 10 ? '0' + myDate.getDate() : myDate.getDate());
			let hou = String(myDate.getHours() < 10 ? '0' + myDate.getHours() : myDate.getHours());
			let min = String(myDate.getMinutes() < 10 ? '0' + myDate.getMinutes() : myDate.getMinutes());
			let sec = String(myDate.getSeconds() < 10 ? '0' + myDate.getSeconds() : myDate.getSeconds());
			let weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六'];
			let week = weeks[wk];

			this.retCar.month = mm;
			this.retCar.year = yy;
			this.retCar.day = dd;
			this.retCar.hour = hou;
			this.retCar.minute = min;
			this.retCar.week = week;
			this.timeTwo = `${yy}-${mm}-${dd} ${hou}:${min}`;
		},
		/* 相差多少天 */
		count() {
			let days = `${this.car.year}-${this.car.month}-${this.car.day}`;
			let days2 = `${this.retCar.year}-${this.retCar.month}-${this.retCar.day}`;
			var days3 = (Date.parse(days2) - Date.parse(days)) / (1000 * 60 * 60 * 24); /*不用考虑闰年否*/
			console.log('days3 :>> ', days3);
			this.isXuanche = days3;
			if (days3 < 0) {
				return uni.$showMsg('还车时间不能小于用车时间');
			}
			this.days = days3;
		},

		// 清楚内容时
		clearContent() {
			this.getGarage();
			this.searchEmpty = false;
		},
		// 内容为空时
		changeContent(e) {
			if (!e) {
				this.getGarage();
				this.searchEmpty = false;
			}
		},
		// 城市选择
		async citySelection(e) {
			//uni.$showMsg(e.province.label + '-' + e.city.label + '-' + e.area.label);
			this.locationAddr = e.province.label.replace(/市/g, '');
			const res = await this.$u.post('api/user/user_admin_car', {
				uid: getApp().globalData.uid,
				page: this.page,
				limit: this.limit,
				name: this.name,
				sort: this.sort,
				screen: this.screen,
				homepage: { place: this.locationAddr },
			});
			if (res.data.length === 0) {
				this.searchEmpty = true;
			} else {
				this.searchEmpty = false;
			}
			this.garageData = res.data;
		},

		//获取车库
		async getGarage() {
			const res = await this.$u.post('api/user/user_admin_car', {
				
				page: this.page,
				limit: this.limit,
				name: this.name,
				
			});
			console.log('获取车库 >>  ', res);
			if (res.data.length === 0) {
				this.searchEmpty = true;
			} else {
				this.searchEmpty = false;
			}
			this.garageData = res.data;
		},

		//车库筛选内容
		async garageScreening() {
			const res = await this.$u.post('api/car/car_screen');
			console.log('车库筛选内容 >>  ', res);

			this.filterData = res.data;

			this.$forceUpdate();
			this.list.nn1 = res.data[0].secondary[0].name;
			this.list.nn2 = res.data[1].secondary[0].name;
			this.list.nn3 = res.data[2].secondary[0].name;
		},
		// 跳转车库详情
		jumpToGarageDetails(id) {
			// let obj = {
			// 	id,
			// 	agent: 0,
			// };
			// uni.navigateTo({
			// 	url: '../garage/garageDetails/garageDetails?obj=' + JSON.stringify(obj),
			// });
			// uni.navigateTo({
			// 	url: './garageDetails/garageDetails?id=' + id
			// });
		},
		// 样式red
		styleRed(index) {
			console.log('index :>> ', index);
			this.redStyle = index;
			this.list.nn1 = this.filterData[0].secondary[index].name;
			console.log('t2 ', this.filterData[0].secondary[index].name);
		},
		styleRed1(index) {
			console.log('index :>> ', index);
			this.redStyle1 = index;
			this.list.nn2 = this.filterData[1].secondary[index].name;
			console.log('t2 ', this.filterData[1].secondary[index].name);
		},
		styleRed2(index) {
			console.log('index :>> ', index);
			this.redStyle2 = index;
			this.list.nn3 = this.filterData[2].secondary[index].name;
			console.log('t2 ', this.filterData[2].secondary[index].name);
		},
		cancel() {
			this.show = false;
			this.list.number = '';
			this.list.number1 = '';

			this.redStyle3 = 0;
		},
		async confirm() {
			this.redStyle3 = 1;
			var number = this.list.number;
			var number1 = this.list.number1;
			//if (number == '' || number1 == '') return uni.$showMsg('请填入金额');
			//if (Number(number1) - Number(number) <= 0) return uni.$showMsg('请正确填入金额区间');
			var screen = {};
			// screen['price'] = `${number},${number1}`;
			// screen['brand'] = this.list.nn1;
			// screen['models'] = this.list.nn2;
			// screen['few'] = this.list.nn3;

			const res = await this.$u.post('api/user/user_admin_car', {
				uid: this.uid,
				page: this.page,
				limit: this.limit,
				name: this.list.nn1,
				sort: this.sort,
				screen,
			});
			console.log('车辆筛选tijia >>  ', res);
			this.show = false;
			if (res.data.length === 0) {
				this.searchEmpty = true;
			} else {
				this.searchEmpty = false;
			}
			this.garageData = res.data;
		},
		// 排序
		srt() {
			var paixu = ['默认', '升序', '降序']; //排序 1正 2反 默认0
			var index = this.index;
			console.log('index :>> ', index);
			this.sort = index;
			this.srt1 = paixu[index];
			this.getGarage();
			uni.$showMsg(paixu[index]);

			if (index >= 2) {
				this.index = 1;
			} else {
				this.index = index + 1;
			}
		},

		jumpToGarageEdit(id) {
			uni.navigateTo({
				url: '../carEdit/carEdit?id=' + id,
			});
		},
	},
	// onReachBottom(e) {
	// 	if (this.status === 'nomore') return;
	// 	console.log('this.status  :>> ', this.status);
	// 	console.log('11 :>> ');
	// 	this.status = 'loading';
	// 	this.getGarage();
	// }
};
</script>

<style lang="scss" scoped>
.content {
	width: 100vw;
	//height: 100vh;
	overflow: scroll;
	background-color: #1b1b1b;
	padding: 40rpx 32rpx;
	padding-top: 20rpx;
	.tmScreening {
		width: 599rpx;
		height: 100vh;
		background-color: #1f1f1f;
		overflow: scroll;
		.vehScreening {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;

			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			border-bottom: 2rpx solid #111111;
		}
		.box {
			width: 434rpx;
			height: 467rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			margin: 0 auto;
			margin-top: 216rpx;
			.days {
				height: 27rpx;
				line-height: 27rpx;
				font-size: 30rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #e2e2e2;
			}
			.top,
			.button {
				display: flex;
				width: 434rpx;
				height: 170rpx;
				background: #242424;
				border-radius: 15rpx;
				padding: 22rpx 25rpx;
				.tm {
					width: 146rpx;
					height: 126rpx;
					background: #393939;
					border-radius: 15rpx;
					padding: 15rpx;
					font-size: 48rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #dadada;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					text {
						height: 50rpx;
						line-height: 50rpx;
						letter-spacing: 5rpx;
					}
				}
				.dt {
					margin-left: 29rpx;
					padding: 15rpx;
					display: flex;
					flex-direction: column;
					justify-content: space-between;
					.text {
						height: 41rpx;
						font-size: 45rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #dadada;
						line-height: 41rpx;
						white-space: nowrap;
					}
					.text1 {
						height: 31rpx;
						font-size: 35rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #747474;
						line-height: 31rpx;
					}
				}
			}
		}
		.btn {
			display: flex;
			justify-content: space-between;
			width: 509rpx;
			height: 100rpx;
			position: absolute;
			left: 50%;
			bottom: 23rpx;
			transform: translateX(-50%);
			.cancel,
			.confirm {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 240rpx;
				height: 100rpx;
				background: #111111;
				border-radius: 10rpx;

				font-size: 36rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #ffffff;
			}
		}
	}

	/deep/.srt {
		width: 100%;
		height: 102rpx;
		display: flex;
		align-items: center;
		.info,
		.info1,
		.info2,
		.info3 {
			flex: 1;
			text-align: center;
			align-items: center;
			text {
				font-size: 27rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #dcdcdc;
			}
			image {
				width: 27rpx;
				height: 24rpx;
				vertical-align: middle;
				margin-left: 5rpx;
			}
		}
		.info {
			image {
				width: 8rpx;
				height: 8rpx;
				vertical-align: bottom;
			}
		}
	}
	/deep/.u-content {
		padding: 0 55rpx !important;
	}
	/deep/.u-icon-wrap {
		//margin-right: 66rpx !important;
	}
	/deep/.u-icon-wrap::after {
		content: '';
		width: 3rpx;
		height: 19rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		background-color: #dcdcdc;
		margin: 32rpx;
	}
	/deep/.u-input {
		font-size: 21rpx;
		font-family: Microsoft YaHei;
		font-weight: 400;
		color: #dcdcdc;
		letter-spacing: 1rpx;
	}
	.filterPopupLayer {
		width: 599rpx;
		height: 100vh;
		background-color: #1f1f1f;
		overflow: scroll;
		.vehScreening {
			width: 100%;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;

			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: 500;
			color: #ffffff;
			border-bottom: 2rpx solid #111111;
		}
		.list {
			width: 599rpx;
			height: 100vh;
			padding: 20rpx 28rpx;

			.thePrcRng {
				.text {
					height: 29rpx;
					line-height: 29rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #ffffff;
				}
				view {
					height: 60rpx;
					display: flex;
					align-items: center;
					margin-top: 19rpx;
					input {
						display: block;
						width: 120rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						background: #111111;
						border-radius: 10rpx;

						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #ffffff;
						margin-right: 20rpx;
					}
					text:nth-child(2) {
						color: #7d0c0c;
						font-size: 30rpx;
						font-weight: 700;
						margin-right: 20rpx;
					}
					text:nth-child(4) {
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #ffffff;
					}
				}
			}
			.brand,
			.model,
			.aFew {
				margin-top: 30rpx;

				.text {
					height: 29rpx;
					line-height: 29rpx;
					font-size: 30rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #ffffff;
				}
				.nm {
					display: flex;
					align-items: center;
					flex-wrap: wrap;
					margin-top: 20rpx;
					.active {
						background-color: #b50000;
					}

					text {
						display: block;
						margin-right: 45rpx;
						width: 150rpx;
						height: 60rpx;
						line-height: 60rpx;
						text-align: center;
						background: #111111;
						border-radius: 10rpx;
						margin-bottom: 19rpx;
						font-size: 30rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #ffffff;
					}
					text:nth-child(3n) {
						margin-right: 0;
					}
				}
			}
			.bottom {
				height: 100rpx;
				display: flex;
				justify-content: center;
				margin-top: 48rpx;
				.active {
					background-color: #b50000;
				}
				.cancel,
				.confirm {
					width: 240rpx;
					height: 100rpx;
					border-radius: 10rpx;
					line-height: 100rpx;
					text-align: center;
					font-size: 36rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #ffffff;
					//background-color: #b50000;
				}
				.cancel {
					margin-right: 29rpx;
				}
			}
		}
	}

	.addCar {
		width: 674rpx;
		height: 287rpx;
		border-radius: 10rpx;
		text-align: center;
		border: 2px dashed #4f5044;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		.add {
			line-height: 287rpx;
			font-size: 200rpx;
		}
	}
	.list {
		position: relative;
		.offShelf {
			background: url(https://sprtcar.oss-cn-chengdu.aliyuncs.com/home/shangjia.png) no-repeat center;
			width: 160rpx;
			height: 60rpx;
			border-radius: 30px 0px 0px 30px;
			position: absolute;
			right: 0;
			top: 20rpx;
			z-index: 99;
			display: flex;
			align-items: center;
			justify-content: center;
			text {
				color: #ff7214;
				font-weight: 600;
				font-size: 35rpx;
				font-family: PingFang SC;
			}
		}
		.image {
			width: 674rpx;
			height: 287rpx;
			border-radius: 10rpx;

			image {
				width: 100%;
				height: 100%;
				border-radius: 10rpx;
			}
		}
		.introduction {
			position: relative;
			height: 197rpx;
			padding-top: 22rpx;
			display: flex;
			.xiexian {
				position: absolute;
				top: 33rpx;
				left: 417rpx;
				width: 38rpx;
				height: 90rpx;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.left {
				display: flex;
				flex-direction: column;
				.text {
					height: 29rpx;
					line-height: 29rpx;
					font-size: 30rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #ffffff;
				}
				.text1 {
					height: 22rpx;
					line-height: 22rpx;
					font-size: 22rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #d60000;
					margin-top: 11rpx;
				}
				.text2 {
					margin-top: 14rpx;
					text {
						display: inline-block;
						padding: 4rpx 17rpx;
						//line-height: 31rpx;
						text-align: center;
						background: #dcdcdc;
						border-radius: 16rpx;
						margin-right: 10rpx;

						font-size: 22rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #1e2024;
					}
				}
			}
			.right {
				text-align: right;
				flex: 1;
				margin-top: 18rpx;
				margin-right: 21rpx;
				.text {
					position: relative;
					height: 29rpx;

					.fuqilai {
						position: absolute;
						right: 0;
						top: 0;
						z-index: 111;
						display: inline-block;
						height: 29rpx;
						font-size: 33rpx;
						font-family: Microsoft YaHei;
						font-weight: 400;
						color: #ffffff;
						line-height: 29rpx;
					}

					.henxian {
						position: absolute;
						right: 0;
						bottom: -5rpx;
						width: 160rpx;
						height: 12rpx;
						background: #880000;
						border-radius: 6rpx;
					}
				}
				.text1 {
					height: 22rpx;
					font-size: 25rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #dcdcdc;
					line-height: 22rpx;
					margin-top: 20rpx;
					text-decoration: line-through;
				}
			}
		}
	}
}
</style>
